<template>
  <div class="appraise-sucess">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <div class="appraise-sucess-title">
      <img src="../../assets/img/appraise/appraise_success_icon.png" alt="">
      <p>感谢评价</p>
      <p>您的评价将是其他用户的重要参考</p>
    </div>
    <div class="appraise-sucess-input">
      <input type="button" value="分享有礼" @click="sharedClick">
      <input type="button" value="查看评价" @click="searchAppraise">
    </div>
  </div>
</template>

<script>
//  import * as recommend from 'api/recommend'
  import BackNavigation from '../mine/navigation.vue'

  export default {
    name: 'appraise-sucess',
    components: {
      BackNavigation
    },
    data () {
      return {
        titleInfo: {
          leftTitle: '返回',
          title: '商品评价',
          rightTitle: ''
        }
      }
    },
    methods: {
      searchAppraise () {
        this.$router.push({
          path: '/commentList',
          query: {
            itemId: this.$route.query.goodsId
          }
        })
      },
      sharedClick () {
        this.$router.push('/shared_surprise')
      }
    }
  }
</script>

<style lang="scss">
  div.appraise-sucess {
    padding: 44px 0 0 0;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;

    >div.appraise-sucess-title {
      padding: 10px 30px;
      width: 100%;
      height: 60px;
      background-color: white;

      >img {
        float: left;
        width: 40px;
        height: 40px;
      }

      >p {
        margin-left: 50px;
        height: 20px;
        line-height: 20px;
        text-align: left;
        color: rgb(66, 66, 66);
        font-size: 14px;
        /*background-color: red;*/
      }

      >p:last-child {
        font-size: 12px;
      }
    }

    >div.appraise-sucess-input {
      padding: 10px 15px;
      overflow: hidden;
      width: 100%;
      height: auto;
      /*background-color: greenyellow;*/

      >input {
        outline: none;
        font-size: 14px;
        width: 45%;
        height: 44px;
        border-radius: 5px;
        -webkit-appearance: none;
        border: 1px solid rgb(27, 162, 232);
        color: rgb(27, 162, 232);
        background-color: white;
      }

      >input:first-child {
        float: left;
      }

      >input:last-child {
        float: right;
      }
    }
  }
</style>
